import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Icon from '$/components/Icon';
import Button from '$/components/Button';

export default props => {
    const {
        theme,
        icon,
        name
    } = props;
    console.log('props',props);
    return (
        <Button style={[{height: '100%'}, props.style]} onPress={props.onPress}>
            <View style={[styles.toolsItemBox,props.boxStyle]}>
                <View style={[styles.toolsItemIconBox, {backgroundColor: theme}, props.iconStyle]}>
                    <Icon style={styles.toolsItemIcon}>{icon}</Icon>
                </View>
                <Text style={[styles.toolsItemText, props.textStyle]}>{name}</Text>
            </View>
        </Button>
    )
}
const styles = StyleSheet.create({
    toolsItemBox:{
        width: 60,
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    toolsItemIconBox:{
        width: 40,
        height: 40,
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    toolsItemIcon:{
        fontSize: 23,
        color: '#fff',
        textAlign: 'center',
    },
    toolsItemText:{
        fontSize: 12,
        color: '#666',
        marginTop: 5
    }
})
